<!-- subpkg_consult/payment/index.vue -->
<script setup>

import {ref} from "vue";
import {useConsultStore} from "@/stores/consult";
import { preOrderApi, createOrderApi } from '@/services/consult'
import { patientDetailApi } from '@/services/patient'

// 患者相关的数据（不具有响应性）
const { type, illnessType, patientId, illnessInfo } = useConsultStore()
// 预付订单信息
const preOrderInfo = ref({})
// 就诊患者信息
const patientDetail = ref({})
// 订单ID
const orderId = ref('')

// 生成预付订单
async function createPreOrder() {
    // 预付订单信息
    const {code, data, message} = await preOrderApi(type, {illnessType});
    // 检测接口是否调用成功
    if (code !== 10000) return uni.utils.showToast(message);
    // 渲染订单数据
    preOrderInfo.value = data;
}

// 获取患者信息
async function getPatientDetail() {
    // 患者详情接口
    const { code, data, message } = await patientDetailApi(patientId)
    // 检测接口是否调用成功
    if (code !== 10000) return uni.utils.toast(message)
    // 渲染患者数据
    patientDetail.value = data
}

// 立即支付
async function onPaymentButtonClick() {
    if (orderId.value !== '') return uni.utils.toast('订单不能重复创建!')

    // 处理上传的图片，要求包含 ID 和 url （接口规订的）
    // 订单只能提交一次！！！
    illnessInfo.pictures = illnessInfo.pictures.map(({ url, uuid }) => {
        return { url, id: uuid }
    })

    // 生成订单接口
    const { code, data, message } = await createOrderApi({
        type,
        illnessType,
        depId,
        patientId,
        ...illnessInfo,
    })
    // 检测接口是否计用成功
    if (code !== 10000) return uni.utils.toast(message)

    // 接收订单ID
    orderId.value = data.id

    // 将 Pinia 中缓存的数据清空掉（订单已创建完成）
    const consultStore = useConsultStore()
    // 病情描述
    consultStore.illnessInfo = consultStore.initalValue
    consultStore.type = ''
    consultStore.illnessType = ''
    consultStore.depId = ''
    consultStore.patientId = ''

    // 选择支付渠道...
}

// 生成预支付订单
createPreOrder()
// 获取就诊患者信息
getPatientDetail()
</script>

<template>
    <scroll-page>
        <view class="payment-page">
            <uni-section
                title-font-size="32rpx"
                title-color="#121826"
                padding="30rpx"
                :title="`图文问诊 ${preOrderInfo.payment}元`"
            >
                <uni-list :border="false">
                    <uni-list-item
                        title="极速问诊"
                        note="自动分配医生"
                        thumb="/static/uploads/doctor-avatar.jpg"
                        thumb-size="lg"
                    />
                    <uni-list-item
                        title="优惠券"
                        show-arrow
                        :right-text="`-¥${preOrderInfo.couponDeduction}`"
                    />
                    <uni-list-item title="积分抵扣">
                        <template #footer>
                            <view class="uni-list-text-red">
                                -¥{{ preOrderInfo.pointDeduction }}
                            </view>
                        </template>
                    </uni-list-item>
                    <uni-list-item title="实付款">
                        <template #footer>
                            <view class="uni-list-text-red">
                                ¥{{ preOrderInfo.actualPayment }}
                            </view>
                        </template>
                    </uni-list-item>
                </uni-list>
            </uni-section>

            <view class="dividing-line"></view>

            <uni-section
                title-font-size="32rpx"
                title-color="#121826"
                padding="30rpx"
                title="患者资料"
            >
                <uni-list :border="false">
                    <uni-list-item title="患者信息">
                        <template #footer>
                            <view class="uni-list-text-gray">
                                {{ patientDetail.name }} | {{ patientDetail.genderValue }} |
                                {{ patientDetail.age }}岁
                            </view>
                        </template>
                    </uni-list-item>
                    <uni-list-item
                        border
                        title="病情描述"
                        :note="illnessInfo.illnessDesc"
                    />
                </uni-list>
            </uni-section>

            <!-- <view class="payment-agreement">
              <radio color="#20c6b2" value="1" />
              我已同意<text style="color: #20c6b2">支付协议</text>
            </view> -->
        </view>
        <!-- 下一步操作 -->
        <view class="next-step">
            <view class="total-amount">
                合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
            </view>
            <button @click="onPaymentButtonClick" class="uni-button">立即支付</button>
        </view>
    </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>
